<script setup>
import Cabinet from './Cabinet.vue';
import { GameControllerOutline } from '@vicons/ionicons5'
import { Textbox24Filled,Delete24Filled,PersonEdit20Filled
 } from "@vicons/fluent"
import { Server } from "@vicons/fa"
import { computed, ref, onMounted } from 'vue' 
import { MdHourglass } from "@vicons/ionicons4";
import { useCabinetStore } from '@/stores/cabinet.js'
import { useGlobalStore } from '@/stores/global.js'
import * as cabinetApi from "@/api/cabinet.js"

// const choosedCabinetIndex=ref(-1);  // 选中的机柜 

let count = ref(2);
const cabinetStore = useCabinetStore();
const globalStore = useGlobalStore();


onMounted(async () => {
  let data = await cabinetApi.getAllCabinet();
  // console.log(data)
  cabinetStore.data = data;
})

// 消息通知
const createMessage = (_message) => {
  window.$message.info(_message)
}

// 绑定点击机柜事件
const clickCabinetHandler = (index)=>{
  globalStore.choosedCabinetIndex = index
}



// 点击全局后，解绑选中状态。
const clickGlobalHandler = () => {
  globalStore.choosedCabinetIndex = -1 
  globalStore.choosedServerIndex = -1

}

// 判断编辑图标是否可以点击
const editableCabinet = computed(() => {
  if(globalStore.choosedCabinetIndex > -1) return false;
  else return true;
})


// 点击操作列图标相关的功能
const clickCabinetAddBtnHandler = ()=>{
  createMessage("增加机柜")
  dialogAddCabinetFormVisible.value = true
}

const clickCabinetEditBtnHandler = ()=>{
  createMessage("编辑机柜")
  
  editCanbinetFormValue.value = Object.assign({}, cabinetStore.data[globalStore.choosedCabinetIndex]);
  dialogEditCabinetFormVisible.value = true
}

const clickCabinetDeleteBtnHandler = ()=>{
  createMessage("删除机柜")
  deleteCanbinetFormsSubmit()
}



// 判断编辑服务器图标是否可以点击
const editableServer = computed(() => { 
  console.log(globalStore.choosedServerIndex)
  if(globalStore.choosedServerIndex > -1) return false;
  else return true;
})

// 点击增加服务器
const clickServerAddBtnHandler = ()=>{
  createMessage("增加服务器")
  let cabinetChoosed = Object.assign({}, cabinetStore.data[globalStore.choosedCabinetIndex]);
  cabinetStore.addServer(cabinetChoosed)
}


const clickServerEditBtnHandler = ()=>{
  createMessage("编辑服务器")
}

const clickServerDeleteBtnHandler = ()=>{
  createMessage("删除服务器")
}



// 机柜表单相关实现
const dialogAddCabinetFormVisible = ref(false)
const addCanbinetFormRef = ref(null)
const addCanbinetFormValue = ref({
  name: "",
  code: ""
})
const addCanbinetFormrules = ref({
  name: {
    required: true,
    message: "请输入机柜名",
    trigger: "blur"
  }
})
const addCanbinetFormsSubmit = async ()=>{
 
  // addCanbinetFormValue.value.name = "123"
  console.log(addCanbinetFormValue.value.name)
  // 提交。
  await cabinetStore.addCabinet(addCanbinetFormValue.value.name)
  //
  cancelAddCanbinetFormsSubmit()
  // 取消选中
  globalStore.choosedCabinetIndex = -1
}

const cancelAddCanbinetFormsSubmit = () => {
  dialogAddCabinetFormVisible.value = false
}

const dialogEditCabinetFormVisible = ref(false)
const editCanbinetFormRef = ref(null)
const editCanbinetFormValue = ref({
  name: "",
  code: ""
})
const editCanbinetFormrules = ref({
  name: {
    required: true,
    message: "请输入机柜名",
    trigger: "blur"
  }
})

// 提交编辑机柜表单
const editCanbinetFormsSubmit = (index)=>{
  
  cabinetStore.updateCabinet(editCanbinetFormValue.value)

  cancelEditCanbinetFormsSubmit()
  // console.log(addCanbinetFormValue.value)
}

const cancelEditCanbinetFormsSubmit = () => {
  dialogEditCabinetFormVisible.value = false 
}

const deleteCanbinetFormsSubmit = ()=>{ 
  window.$dialog.success({
    title: "删除机柜",
    content: "",
    positiveText: "确定",
    negativeText: "不确定",
    maskClosable: true,
    onPositiveClick: async ()=> {
      let res = await cabinetStore.deleteCabine(globalStore.choosedCabinetIndex)
      if(res) {
        globalStore.choosedCabinetIndex = -1
      }
    }
  });
}


</script>

<template>
  <main @click="clickGlobalHandler" class="control-panel">
    <h1>服务器管理</h1>
    <br />
    <div >
      <n-button-group>
        <n-tag type="success">机柜：</n-tag>
        <n-button @click.stop="clickCabinetAddBtnHandler">
          <template #icon>
            <n-icon size="26" color="#18a058" depth="1" :component="Textbox24Filled" />
          </template>
        </n-button>
        <n-button :disabled="editableCabinet" @click.stop="clickCabinetEditBtnHandler">
          <template #icon>
            <n-icon size="22" color="#2080f0" depth="1" :component="PersonEdit20Filled" />
          </template>
        </n-button>
        <n-button :disabled="editableCabinet" @click.stop="clickCabinetDeleteBtnHandler">
          <template #icon>
            <n-icon size="22" color="red" depth="1" :component="Delete24Filled" />
          </template>
        </n-button>
      </n-button-group>
      
      <!--  -->
      <n-button-group style="margin-left:1rem;">
        <n-tag type="success">服务器：</n-tag>
        <n-button :disabled="editableCabinet" @click.stop="clickServerAddBtnHandler">
          <template #icon>
            <n-icon size="20" color="#18a058" depth="1" :component="Server" />
          </template>
        </n-button>
        <n-button :disabled="editableServer" @click.stop="">
          <template #icon>
            <n-icon size="22" color="#2080f0" depth="1" :component="PersonEdit20Filled" />
          </template>
        </n-button>
        <n-button disabled>
          <template #icon>
            <n-icon size="22" color="red" depth="1" :component="Delete24Filled" />
          </template>
        </n-button>
      </n-button-group>
    </div>

    <br />
    
    <div class="cabinet-list">
      <Cabinet :choosed="index==globalStore.choosedCabinetIndex" :item="item" @click.stop="clickCabinetHandler(index)" v-for="(item,index) in cabinetStore.data" :key="index" />
      
    </div>

    <div class="mask"
      v-if="dialogAddCabinetFormVisible"
      >
      <n-dialog  
        class="dialog"
        title="添加机柜"
        negative-text="不确认"
        positive-text="确认"
        @positive-click="addCanbinetFormsSubmit"
        @negative-click="cancelAddCanbinetFormsSubmit"
        :closable="false"
        bordered
        >
        <n-form
          ref="addCanbinetFormRef"
          :label-width="80"
          :model="addCanbinetFormValue"
          :rules="addCanbinetFormrules"
        >
          <n-form-item label="名称" path="cabinet.name">
            <n-input v-model:value="addCanbinetFormValue.name" placeholder="输入名称" />
          </n-form-item>
        </n-form>

      </n-dialog>
    </div>

    <div class="mask"
      v-if="dialogEditCabinetFormVisible"
      >
      <n-dialog  
        class="dialog"
        title="编辑机柜"
        negative-text="不确认"
        positive-text="确认"
        @positive-click="editCanbinetFormsSubmit"
        @negative-click="cancelEditCanbinetFormsSubmit"
        :closable="false"
        bordered
        >
        <n-form
          ref="editCanbinetFormRef"
          :label-width="80"
          :model="editCanbinetFormValue"
          :rules="editCanbinetFormrules"
        >
          <n-form-item label="名称" path="cabinet.name">
            <n-input v-model:value="editCanbinetFormValue.name" placeholder="输入名称" />
          </n-form-item>
        </n-form>

      </n-dialog>
    </div>

  </main>
</template>

<style>
.cabinet-list {
  display: flex;
  top:200px;
}
.control-panel{
  padding: 2rem;
}
.dialog{
  position:absolute !important;
  top: 200px;
  left: 50%;
  margin-left: -100px;
}
.mask{
  position: absolute;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  background-color: #0009;
}
</style>
